<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>统计</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>
</head>

<body class="gray-bg">

    <div class="wrapper wrapper-content">

        <div class="row">
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">全年</span>
                        <h5>总收入</h5>
                    </div>
                    <div class="ibox-content">
<!--                        <h1 class="no-margins">40 886,200</h1>-->
                        <h1 class="no-margins" th:if="${sumMoney != null}" th:text="${sumMoney}"></h1>
                        <h1 class="no-margins" th:if="${sumMoney == null}" th:text="4564879.20"></h1>
                        <div class="stat-percent font-bold text-success">98% <i class="fa fa-bolt"></i>
                        </div>
                        <small>总收入</small>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-info pull-right">全年</span>
                        <h5>订单量</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins" th:if="${count != 0}" th:text="${count}"></h1>
                        <h1 class="no-margins" th:if="${count == 0}" th:text="135"></h1>
                        <div class="stat-percent font-bold text-info">20% <i class="fa fa-level-up"></i>
                        </div>
                        <small>新订单</small>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>订单</h5>
                    </div>

                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-9">
                                <div id="echarts111" style="width: 900px;height:500px;"></div>
                            </div>

                            <div class="col-sm-3" th:if="${dept.getDeptName()}!=null">
                                <ul class="stat-list">
                                    <li>
                                        <h2 class="no-margins"><span th:text="${dept.getDeptName()}"></span></h2>
                                    </li>
                                    <li>
                                        <h2 class="no-margins"><span th:text="${count}"></span></h2>
                                        <small>订单总数</small>
                                        <div class="stat-percent">48% <i class="fa fa-level-up text-navy"></i>
                                        </div>
                                        <div class="progress progress-mini">
                                            <div style="width: 48%;" class="progress-bar"></div>
                                        </div>
                                    </li>
                                    <li>
                                        <h2 class="no-margins "><span th:text="${orderNumMonth1}"></span></h2>
                                        <small>本月订单数</small>
<!--                                        <div class="stat-percent">48% <i class="fa fa-level-down text-navy"></i>-->
                                        <div class="stat-percent">48% <i class="fa fa-level-up text-navy"></i>
                                        </div>
                                        <div class="progress progress-mini">
                                            <div style="width: 48%;" class="progress-bar"></div>
                                        </div>
                                    </li>
                                    <li>
                                        <h2 class="no-margins "><span th:text="${price}"></span></h2>
                                        <small>本月销售额</small>
                                        <div class="stat-percent">22% <i class="fa fa-bolt text-navy"></i>
                                        </div>
                                        <div class="progress progress-mini">
                                            <div style="width: 22%;" class="progress-bar"></div>
                                        </div>
                                    </li>
                                 </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>今日最新成交订单</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <table class="table table-hover no-margins">
                            <thead>
                                <tr>
                                    <th>状态</th>
                                    <th>日期</th>
                                    <th>公司</th>
                                    <th>交易金额</th>
                                </tr>
                            </thead>
                            <tbody th:each="sysOrder:${sysOrders}">
                                <tr>
                                    <td>
                                        <small th:if="${sysOrder.getMyStatus()==0}" th:text="订单已取消"></small>
                                        <small th:if="${sysOrder.getMyStatus()==1}" th:text="订单已完成"></small>
                                        <small th:if="${sysOrder.getMyStatus()==2}" th:text="订单正在配送中"></small>
                                    </td>
                                    <td>
                                        <i class="fa fa-clock-o"></i>
                                        <span th:text="${#dates.format(sysOrder.getCreateTime(), 'yyyy-MM-dd HH:mm:ss')}"></span>
                                    </td>
                                    <td>
                                        <span th:if="${sysOrder.getSysDept1() == 301}" th:text="中国石化仪征化纤股份有限公司"></span>
                                        <span th:if="${sysOrder.getSysDept1() == 302}" th:text="库车益泰棉业有限公司"></span>
                                        <span th:if="${sysOrder.getSysDept1() == 303}" th:text="鲁泰纺织有限公司"></span>
                                        <span th:if="${sysOrder.getSysDept1() == 304}" th:text="重庆三五三三印染服装"></span>
                                        <span th:if="${sysOrder.getSysDept1() == 305}" th:text="广州帝豪服装有限公司"></span>
                                        <span th:if="${sysOrder.getSysDept1() == 306}" th:text="雅兰迪服饰商贸有限公司"></span>
                                        <span th:if="${sysOrder.getSysDept1() == 307}" th:text="中国李宁有限公司"></span>
                                    </td>
                                    <td class="text-navy">
                                        <i class="fa fa-yen"></i>
                                        <span th:text="${sysOrder.getGoodsPrice()}"></span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
         </div>
      </div>
    </div>

    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/plugins/echarts/echarts.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/ajax/libs/flot/jquery.flot.js}"></script>
    
    <th:block th:include="include :: sparkline-js" />

    <script type="text/javascript">

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echarts111'));

	    $(document).ready(function () {
	        $.post("/system/option",function (res) {

                // 指定图表的配置项和数据
                option = {

                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: res.data.deptName
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: res.data.lastDate
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                            res.data.series[0],
                            res.data.series[1],
                            res.data.series[2],
                            res.data.series[3],
                            res.data.series[4]
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);

            });
	    });
    </script>
</body>
</html>
